import React,{useState,useEffect} from 'react'
import {Link} from 'react-router-dom'
// import axios from './server/axios'//导入时默认导出可以随便命名
// import {getTopics,getTopic} from './server';//直接调用方法，但是写的方法多
import * as api from './server';//引入所有的方法
import './header.css'



const Home = () => {
  const [topics,setTopics]=useState([]);


    useEffect(()=>{
        // fetch('https://cnodejs.org/api/v1/topics')
        // .then(res=>res.json())
        // .then(res=>{
        //     console.log(res)
        // })
        
        api.getTopics()//把所有的请求写到一个文件中更简洁，等价于axios.get('/topics') 
        .then(res=>{
            setTopics(res.data)
        })

        // api.getTopic(100)
        // .then(res=>{
        //   console.log(res)
        // })


    },[])

  return (
    <div>
      {
        topics.map(item=>{
          return <li className="lists" key={item.id}>
            {/* <Link to='/topic'> {item.title}</Link>  
            topic后面加变量用差值表达式to={'topic/'+item.id}   
            或者用反引号to={`topic/${item.id}`}
            */}
            <Link to={`topic/${item.id}`}> {item.title}</Link>
          </li>
        })
      }
    </div>
  )
}

export default Home
